<template>
  <div class="selectAddress">
    <div class="container">
      <div class="address_tittle">
        <img src="../../../assets/images/FrameBlue.png" alt="" />
      </div>
      <div class="pay_info">
        <div>
          您要偿还 <span>{{ payInfo.put_money }}</span> 元
        </div>
      </div>
      <div class="address_list">
        <div class="list">
          <div class="toAddress">支付方式：</div>
          <div class="toForm">
            <div
              class="toFormList"
              v-for="(item, index) in payList"
              :key="index"
            >
              <el-radio-group v-model="radio">
                <el-radio
                  :label="item.type"
                  class="el_radioInfo"
                  @click="radioChange($event, item.type)"
                >
                  <span>
                    {{ item.typeName }}
                  </span>
                </el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="footer_button">
          <el-button class="qxSubmit" @click="onCancel">取消</el-button>
          <el-button class="ydSubmit" @click="qdPay">确定易定</el-button>
        </div>
      </div>
    </div>
    <!-- 支付容器 -->
    <div class="payform" v-html="payForm"></div>
  </div>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance } from "vue";
import { Edit, Iphone, Lock } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import enterpriseCenterApi from "@/api/enterprise-center";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
defineProps({
  msg: String,
});
onMounted(() => {
  payInfo.value = {
    put_money: route.query.money,
    order_id: route.query.id,
    type: route.query.type,
    return_url: route.query.return_url,
  };
});

const put_money = ref(""); //还款金额
const payInfo = ref({
  put_money: "",
  order_id: "",
  type: "",
  return_url: "",
});
// 支付表单
const payForm = ref();
const radio = ref(1);
const isClick = ref("");
const radioChange = (e, typeId) => {
  console.log("val", e, typeId);
  radio.value = typeId;
  console.log("最新的值", radio.value);
};
const onCancel = () => {
  router.push({
    path: payInfo.value.return_url,
  });
};
const qdPay = () => {
  if (radio.value == 3) {
    router.push({
      path: "/corporate-transfer",
      query: {
        money: payInfo.value.put_money,
        type: payInfo.value.type,
        //这里传价格
        id: payInfo.value.order_id,
      },
    });
  } else {
    enterpriseCenterApi
      .createPay({
        type: payInfo.value.type,
        method: Number(radio.value),
        order_id: payInfo.value.order_id,
        returnurl: proxy.$WEB_URL + "/#" + payInfo.value.return_url,
      })
      .then((res) => {
        console.log("支付页面", res.data);
        if (res.code == 1) {
          payForm.value = res.data;
          // nextTick(() => {
          //   document.forms[0].submit();
          // });
        }
      });
  }
};
//修改地址
const editAddress = (item, id) => {
  console.log("地址", item, id);
};
const clickitem = (event) => {};
const payList = ref([
  {
    type: 1,
    typeName: "微信支付",
  },
  {
    type: 2,
    typeName: "支付宝支付",
  },
  {
    type: 3,
    typeName: "对公转账",
  },
]);

//   const form = ref({
//     name: "",
//     region: "",
//     date1: "",
//     date2: "",
//     delivery: false,
//     type: [],
//     resource: "",
//     desc: "",
//     checked: false,
//     phone: "",
//     password: "",
//     code: "",
//   });

//   const phoneNumberRegex = /^1[3456789]\d{9}$/;

//   const onSubmit = () => {
//     if (!form.value.phone)
//       return ElMessage({ message: "请输入手机号", type: "error" });

//     if (!form.value.password)
//       return ElMessage({ message: "请输入密码", type: "error" });
//     if (!form.value.checked)
//       return ElMessage({ message: "请勾选协议", type: "error" });
//     if (!phoneNumberRegex.test(form.value.phone))
//       return ElMessage({ message: "请输入正确的手机号码", type: "error" });
//     console.log("submit!");
//     //成功登录
//     router.push({
//       path: "/homePage",
//       query: {
//         flag: "2",
//       },
//     });
//   };
</script>

<style scoped lang="less">
.el_radioInfo {
  // border: 1px solid red;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:deep(.el-radio-group) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:deep(.el-radio__label) {
  width: 100%;
  display: flex;
  align-items: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.default_address {
  margin-right: 17px;
  margin-left: 17px;
}
.el_button {
  // margin-right: 17px;
  width: 92px;
  height: 34px;
  background: #2487e8;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.selectAddress {
  // border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  justify-content: center;

  .container {
    width: 821px;
    height: 500px;
    margin-top: 30px;
    .address_tittle {
      width: 100%;
      height: 62px;
      line-height: 62px;
      text-align: center;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      font-size: 24px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.87);
      img {
        width: 135px;
        height: 50px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
      }
    }
    .pay_info {
      display: flex;
      flex-direction: column;
      margin-top: 34px;

      font-size: 18px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.87);
      line-height: 36px;
      width: 821px;
      align-items: center;
      span {
        color: #e84026;
      }
    }
    .address_list {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      margin-top: 34px;

      .list {
        display: flex;
        // border: 1px solid red;
        align-items: center;
        width: 521px;
        margin: 0 auto;
        .toAddress {
          font-size: 16px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.87);
          width: 100px;
        }
        .toForm {
          border: 1px solid #e6e6e6;
          padding: 0 12px;
          box-sizing: border-box;
          width: 100%;
          box-sizing: border-box;
          .toFormList {
            display: flex;
            // flex-direction: column;
            // border: 1px solid red;
            height: 40px;
            line-height: 40px;
            align-items: center;
            width: 100%;
            // border-bottom: 1px solid #e6e6e6;
          }
          .toFormList:last-child {
            border: none;
          }
        }
      }
      .footer_button {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 34px auto;
      }
      .qxSubmit {
        width: 140px;
        height: 42px;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        border: 1px solid rgba(0, 0, 0, 0.6);
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.6);
      }
      .ydSubmit {
        width: 140px;
        height: 42px;
        background: #2487e8;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }
}
#app {
  padding: 0;
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
}
</style>
